<template>
  <div class="coverDiv">
    <div class="selectBox" v-for="(item,index) in picnum" :key="item" @click="openDialog(index)">
      <span>选择素材</span>
      <img :src="images[index]" alt />
    </div>
    <!-- 弹出层 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!-- tab栏切换 -->
      <div class="radioTab">
        <el-radio-group v-model="radio" @change="getList">
          <el-radio-button :label="null">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <el-col class="img_item" :xs="12" :sm="6" :md="6" :lg="4" v-for="(item) in imageList" :key="item.id">
          <div class="img_box" @click="selectImage(item)">
            <img :src="item.url" alt />
            <div class="selected" v-if="item.isSected">
              <img src="./img/selected.png" alt />
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total_count">
    </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
// 引入获取图片素材接口
import {getImages} from '@/api/images'
export default {
  props: {
    picnum: {
      type: Number,
    },
    picture:{
        type:Array,
    }
  },
  data() {
    return {
      dialogVisible: false,
      radio: null,
      page:1,
      per_page:10,
      imageList:[],
      total_count:0,
      curIndex:0,
      curImage:'',
      images:new Array(this.picnum),
    };
  },
  methods: {
    //打开弹出层
    openDialog(index) {
      this.dialogVisible = true;
      this.curIndex = index;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 获取图片素材
    getList(){
        getImages({
            collect:this.radio,
            page:this.page,
            per_page:this.per_page,
        })
        .then((res)=>{
            // console.log(res);
            let images = res.data.data.results;
            images.forEach((item)=>{
                item.isSected = false;
            });
            this.imageList = images;
            this.total_count = res.data.data.total_count;
        })
        .catch((err)=>{
            console.log('获取图片素材失败');
        });
    },
    // 切换每页显示条数时触发
    handleSizeChange(size){
        this.per_page = size;
        this.page = 1;
        // 重新调接口
        this.getList();
    },
    // 切换页码时触发
    handleCurrentChange(page){
        this.page = page;
        // 重新调接口
        this.getList();
    },
    selectImage(image){
        // 排他:只显示当前点击图片的图标
        this.imageList.forEach((item)=>{
            item.isSected = false;
        });
        image.isSected = true;
        this.curImage = image.url;
    },
    // 确定
    sureBtn(){
        this.images[this.curIndex] = this.curImage;
        // 关闭弹出层
        this.dialogVisible = false;
    },
    // 把选择的图片传递给父组件
    transformImage(){
        return this.images;
    },
    // 清空图片数组
    emptyImage(){
        this.images = new Array(this.picnum);
    }

  },
  mounted(){
      this.getList();
      this.images = this.picture;
  }
};
</script>

<style lang="less" scoped>
.coverDiv {
  margin-left: 80px;
  margin-bottom: 20px;
}
.selectBox {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  margin-right: 10px;
//   overflow: hidden;
  img{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
  }
}
.radioTab {
    margin-bottom: 20px;
}
.img_item {
  position: relative;
  box-sizing: border-box;
  .img_box {
    height: 120px;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .selected {
      position: absolute;
      width: 20%;
      left: 0;
      top: 0;
    }
  }
}
.pagination {
    margin-top: 20px;
}
</style>